<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      /* 
        浏览器加载一个页面时,是按照自上向下的顺序加载的
          读取到一行就运行一行,如果将script标签写到页面的上边,
          在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载
          会导致无法获取到DOM对象。
      */

      /* 
        将js代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行js代码
      */

      //如果想写在head里面,需要js等待页面加载完再执行
      /* 
        onload事件会在整个页面加载完成之后才触发
        为window绑定一个onload事件
            该事件对应的响应函数将会在页面加载完成之后执行。
            这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了,

      */
      window.onload = function () {
        //获取id为btn的按钮
        var btn = document.getElementById('btn');

        //为按钮绑定一个单击响应函数
        btn.onclick = function () {
          alert('hello');
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
  </body>
</html>
